<template>
	<view class="home-view">
		<u-navbar title=" " bgColor="transparent">
			<view slot="left">红星美凯龙·三迪商城</view>
		</u-navbar>
		<view class="homeBg">
			<image :src="imgUrl + 'home-top-bg.png'" mode="" class="bgimage"></image>
		</view>
		<view class="homeViewCon">
			<view class="search" @tap="toPage('/package/pages/searchView/searchView')">
				<u-icon name="search" size="18" color="#666"></u-icon>
				<view class="ipt">
					搜索商家-店铺-商品
				</view>
				<view class="searchText">
					搜索
				</view>
			</view>

			<view class="swiper-box">
				<u-swiper :list="swiperList" indicator keyName="img" circular height="338rpx" indicatorActiveColor="#575757"
					@click="swiperClick"></u-swiper>
			</view>

			<view class="shopCard">
				<!-- <u-swiper :list="swiperListMid" indicator keyName="img" circular height="338rpx"
					indicatorActiveColor="#575757"></u-swiper> -->
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="duration"
					easing-function="linear" indicator-color="#575757" :circular="true" duration="600" @change="swiperChange">
					<swiper-item v-for="(item,index) in swiperListMid" :key="index">
						<view class="itemSwiper">
							<view class="itemTop flex_heng" @click="shopNameClick(item)">
								<image :src="item.icon" mode="" class="itemIcon"></image>
								<view class="shopName">
									{{item.shopName}}({{item.boothDadName?item.boothDadName:''}})
								</view>
								<view class="goShopBox">
									进店<uni-icons type="right" size="12" color="#666666"></uni-icons>
								</view>
							</view>
							<view class="sortName">
								{{item.sortName}}
							</view>
							<image :src="item.img" mode="" @click="goodsClick(item)"></image>
						</view>
					</swiper-item>
				</swiper>

				<view class="dotsBox flex_heng">
					<view :class="swiperCurrent == index?'dotItemTwo':'dotItem'" v-for="(item,index) in swiperListMid"
						:key="index"></view>
				</view>
			</view>



			<view class="couponBox" :style="{background:`url(${imgUrl}couponBg.png) no-repeat`}" v-if="couponList.length>0">
				<view class="shopName">
					三迪广场·红星美凯龙
				</view>
				<view class="couponListBox flex_heng">
					<view class="couponItemBox" :style="{background:`url(${imgUrl}couponItemBg.png) no-repeat`}"
						v-for="(item,index) in couponList" :key="index">
						<view class="itemName">
							{{item.remark ?item.remark:'' }}
						</view>
						<view class="itemTypeName">
							{{item.name}}
						</view>
						<view class="remark">
						</view>
						<view class="receiveBtn" @click="ledCoupon(item)" v-if="!item.isReceive">
							领取优惠
						</view>
						<view class="receiveBtnTwo" v-else>
							已领取
						</view>
					</view>
				</view>
			</view>

			<view class="printBox" :style="{background:`url(${imgUrl}pointbg.png) no-repeat`}" v-else>
				<view class="pointTitle flex_heng">
					我的积分
					<span @click="toPage('/package/pages/pointShop/pointShop')">
						去兑换<u-icon name="arrow-right" size="10" color="#fff"></u-icon>
					</span>
				</view>

				<view class="pointCon flex_heng">
					<view class="printNum">
						{{allIntegral.integralProfit || 0}}
					</view>
					<view class="getPoint" @click="goGetPoint()">
						获取积分
					</view>
				</view>
			</view>

			<view class="meWant">
				<view class="wantTitle">
					我要逛
				</view>

				<view class="wanlListBox">
					<view class="wantItem" v-for="(item,index) in wanlList" :key="index"
						:style="{background:`url(${item.sortIcon}) no-repeat`}" @tap="goClassify(item)">
						<image :src="imgUrl + 'wantBg.png'" mode="" class="wantImg"></image>
						<view class="itemTop flex_heng">
							<view class="itemName">
								{{item.sortName}}
							</view>
							<uni-icons type="right" size="14" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="protocolShow" :round="16" @close="protocolclose" @open="protocolopen" mode="center"
			:closeable="false" :safeAreaInsetBottom="false" bgColor="transparent">
			<view class="popupContent">
				<!-- <image :src="learn" mode="widthFix" class="popupLogoImg"></image> -->
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="duration"
					easing-function="linear" indicator-color="#575757" :circular="true" duration="600" @change="swiperChange">
					<swiper-item v-for="(item,index) in announcementlList" :key="index">
						<view class="itemSwiper">
							<image :src="item.img" mode="" @click="goodsAnnoun(item)"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="close" @click="protocolclose">
					<uni-icons type="close" size="50" color="#000000"></uni-icons>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getTypeList,
		getBannerList,
		getGuideList,
		getCouponListAll,
		ledCoupon,
		getList,
		getAnnouncementInfo,
		getIntegralList
	} from '@/api/api.js';
	export default {
		data() {
			return {
				opData: '',
				imgUrl: this.$imgUrl,
				swiperCurrent: 0,
				searchKey: '',
				swiperList: [],
				swiperListMid: [],
				tipsList: [],
				couponList: [],
				wanlList: [],
				announcementlList: [],
				protocolShow: false,
				learn: null,
				allIntegral: {}
			};
		},
		onLaunch() {

		},
		onLoad(op) {
			console.log('op', op);
			if (op.q) {
				const q = decodeURIComponent(op.q) // 获取到二维码原始链接内容
				console.log('q', q)
				const parts = q.split('?')[1].split('=');
				console.log('parts', parts)
				const id = parts[1];
				console.log('二维码ID', q);
				this.opData = id;
				uni.setStorageSync('merchantId', id)
			}

			// this.getHomeTypeList();
			this.getHomeBannerList();
			this.getHomeGuideList();
			this.getAnnInfo()
		},
		computed: {

		},
		onShow() {
			console.log(uni.getStorageSync('userInfo'));
			this.getCouponList()
			this.getSonList()
			if (uni.getStorageSync('userInfo').token) {
				this.getIntegralList()
			}
		},
		onHide() {

		},
		onReachBottom() {

		},
		watch: {

		},
		methods: {
			//获取积分
			goGetPoint() {
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url: '/package/pages/getPoint/getPoint'
					})
				} else {
					uni.showToast({
						title: '请登录后获取积分',
						icon: 'none',
					});
				}
			},
			getIntegralList(userIntegral) {
				getIntegralList().then(res => {
					if (res.code == 200) {
						this.allIntegral = res.data
						if (res.rows.length > 0) {
							this.integralList = [...this.integralList, ...res.rows];
						}
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
				})
			},
			goodsAnnoun(item) {
				if (item.isDisplay) {
					uni.setStorageSync('announCon', item.txt)
					uni.navigateTo({
						url: `/package/pages/announ/announ`
					})
				}
			},
			//获取公告
			getAnnInfo() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				getAnnouncementInfo().then(res => {
					console.log('获取公告', res)
					this.announcementlList = res.data;
					if (this.announcementlList.length > 0) {
						this.protocolShow = true;
						// this.learn = this.announcementlList[1].img

					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},
			understandClick() {
				this.protocolShow = true
			},
			protocolclose() {
				this.protocolShow = false
			},

			protocolopen() {
				this.protocolShow = true
			},

			goClassify(item) {
				console.log('item', item)
				if (item.dadId == 0) {
					uni.setStorageSync('dadId', item.id)
				} else {
					uni.setStorageSync('dadId', item.dadId)
				}
				uni.switchTab({
					url: `/pages/classify/classify`
				})
			},

			// 获取首页分类
			getSonList() {
				getList({
					params: {
						dadId: 0
					}
				}).then(res => {
					console.log('res', res)
					this.wanlList = res.data;
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},


			// 领取优惠券
			ledCoupon(item) {
				ledCoupon(item.id).then(res => {
					if (res.code == 200) {
						console.log(res);
						uni.showToast({
							title: '领取成功',
							icon: 'none',
						});
						this.getCouponList();
					}
				})
			},

			// 获取优惠券列表
			getCouponList() {
				getCouponListAll({
					pageNum: 1,
					pageSize: 2,
					// status: 2,
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.couponList = res.rows
						}
					}
				})
			},
			//tips详情
			clickItemTip(item) {
				uni.navigateTo({
					url: `/package/pages/articleDetail/articleDetail?id=${item.id}`
				})
			},

			//获取首页顶部轮播图
			getHomeBannerList() {
				const params = {
					//sceneType =1 首页顶部 ;sceneType =3首页中间 
					sceneType: 1,
				}
				getBannerList({
					params
				}).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})
			},
			//轮播图点击
			swiperClick(e) {
				let swiperInfo = this.swiperList[e];
				let goodsId = this.swiperList[e].productId;
				console.log('swiperInfo', swiperInfo)
				if (swiperInfo.type == 1) {
					uni.navigateTo({
						url: `/package/pages/goodsDetail/goodsDetail?goodsId=${goodsId}`
					})
				} else {
					uni.setStorageSync('announCon', swiperInfo.txt)
					uni.navigateTo({
						url: `/package/pages/announ/announ`
					})
				}

			},

			goodsClick(item) {
				uni.navigateTo({
					url: `/package/pages/goodsDetail/goodsDetail?goodsId=${item.productId}`
				})
			},

			shopNameClick(item) {
				uni.navigateTo({
					url: `/package/pages/shopInfo/shopInfo?shopId=${item.shopId}`
				})
			},

			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},

			//获取首页中间轮播图
			getHomeGuideList() {
				const params = {
					sceneType: 3,
				}
				getBannerList({
					params
				}).then(res => {
					if (res.code == 200) {
						this.swiperListMid = res.data
					}
				})
			},

			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5 !important;
	}

	.home-view {
		width: 100%;
		// min-height: 110%;
		box-sizing: border-box;
		background: #f5f5f5;
		position: relative;

		.popupContent {
			width: 622rpx;
			border-radius: 16rpx;
			overflow-y: auto;
			background: transparent;
			padding-bottom: 100rpx;

			// position: relative;
			.swiper {
				width: 100%;
				height: 904rpx;

				.itemSwiper {
					width: 100%;
					height: 904rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}

			}

			.popupLogoImg {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.close {
				text-align: center;
				margin-top: 28rpx auto 0;
			}
		}

		.homeBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 736rpx;

			.bgimage {
				width: 100%;
				height: 100%
			}
		}

		.homeViewCon {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 100%;
			padding: 204rpx 28rpx 40rpx;
			box-sizing: border-box;

			.search {
				width: 100%;
				height: 74rpx;
				border-radius: 310rpx;
				opacity: 1;
				background: #ffffff;
				backdrop-filter: blur(20rpx);
				display: flex;
				align-items: center;
				position: relative;
				padding-left: 20rpx;
				box-sizing: border-box;

				.ipt {
					margin-left: 8rpx;
					font-size: 26rpx;
					color: #999;
				}

				.searchText {
					position: absolute;
					top: 50%;
					right: 26rpx;
					transform: translate(0, -50%);
					color: #007fff;
					text-align: left;
					font-size: 28rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
				}
			}

			.swiper-box {
				width: 100%;
				height: 338rpx;
				border-radius: 8rpx;
				margin-top: 28rpx;
				overflow: hidden;
			}

			.shopCard {
				width: 100%;
				height: 428rpx;
				border-radius: 8rpx;
				margin-top: 28rpx;
				overflow: hidden;
				background: #ffffff;
				padding: 28rpx;
				box-sizing: border-box;
				position: relative;

				.swiper {
					width: 100%;
					height: 410rpx;

					.itemSwiper {
						.itemTop {
							position: relative;
							padding-left: 80rpx;

							.itemIcon {
								position: absolute;
								top: 28%;
								left: 0;
								transform: translateY(-50%);
								width: 60rpx;
								height: 60rpx;
							}

							.shopName {
								color: #000000;
								font-size: 32rpx;
								font-weight: 600;
								font-family: "Alibaba PuHuiTi 2.0";
							}

							.goShopBox {
								color: #000000;
								font-size: 24rpx;
								font-weight: 600;
								font-family: "Alibaba PuHuiTi 2.0";
							}
						}

						.sortName {
							padding-left: 80rpx;
							color: #666666;
							font-size: 24rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						image {
							margin-top: 28rpx;
							width: 100%;
							height: 270rpx;
						}
					}

				}

				.dotsBox {
					position: absolute;
					bottom: 12rpx;
					left: 50%;
					transform: translateX(-50%);

					.dotItem {
						width: 14rpx;
						height: 8rpx;
						border-radius: 8rpx;
						background: #57575799;
						margin: 0 4rpx;
					}

					.dotItemTwo {
						width: 20rpx;
						height: 8rpx;
						border-radius: 8rpx;
						background: #57575799;
						margin: 0 4rpx;
					}
				}
			}

			.printBox {
				border-radius: 16rpx;
				margin-top: 28rpx;
				width: 100%;
				height: 310rpx;
				background-size: 100% 100% !important;
				padding: 28rpx;
				box-sizing: border-box;

				.pointTitle {
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";

					span {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.pointCon {
					height: 80%;
					width: 100%;
					justify-content: flex-start;

					.printNum {
						display: flex;
						align-items: flex-end;
						color: #ffffff;
						font-size: 84rpx;
						font-weight: 600;
					}

					.getPoint {
						width: 168rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 178rpx;
						opacity: 1;
						background: #ffffff;
						color: #007fff;
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						margin-left: 33rpx;
						box-sizing: border-box;
					}
				}
			}

			.couponBox {
				margin-top: 28rpx;
				width: 100%;
				height: 410rpx;
				background-size: 100% 100% !important;
				padding: 40rpx 28rpx 16rpx;
				box-sizing: border-box;

				.shopName {
					color: #ffffff;
					font-size: 32rpx;
					font-weight: 600;
					font-family: "Alibaba PuHuiTi 2.0";
					margin-left: 24rpx;
				}

				.couponListBox {
					width: 100%;
					height: 290rpx;
					margin-top: 18rpx;

					.couponItemBox {
						width: 310rpx;
						height: 100%;
						background-size: 100% 100% !important;
						position: relative;

						.itemName {
							position: absolute;
							top: 22rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 270rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							color: #000000;
							font-size: 26rpx;
							font-weight: 700;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemTypeName {
							position: absolute;
							top: 90rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 270rpx;
							height: 78rpx;
							line-height: 78rpx;
							text-align: center;
							font-size: 56rpx;
							font-weight: 700;
							font-family: "Alibaba PuHuiTi 2.0";
							color: #EE3D12;
						}

						.remark {
							position: absolute;
							top: 160rpx;
							left: 50%;
							transform: translateX(-50%);
							color: #000000;
							width: 270rpx;
							height: 34rpx;
							line-height: 34rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.receiveBtn {
							position: absolute;
							top: 204rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 168rpx;
							height: 46rpx;
							border-radius: 46rpx;
							line-height: 46rpx;
							text-align: center;
							opacity: 1;
							background: linear-gradient(90deg, #0055ff 0%, #007fff 100%);
							color: #ffffff;
							font-size: 24rpx;
							font-weight: 700;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.receiveBtnTwo {
							position: absolute;
							top: 204rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 168rpx;
							height: 46rpx;
							border-radius: 46rpx;
							line-height: 46rpx;
							text-align: center;
							opacity: 1;
							background: #808080;
							color: #ffffff;
							font-size: 24rpx;
							font-weight: 700;
							font-family: "Alibaba PuHuiTi 2.0";
						}
					}
				}
			}

			.meWant {
				margin-top: 28rpx;
				width: 100%;
				height: 252rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #ffffff;
				padding: 28rpx;
				box-sizing: border-box;

				.wantTitle {
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
				}

				.wanlListBox {
					width: 100%;
					height: 136rpx;
					margin-top: 20rpx;
					// justify-content: flex-start;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.wantItem {
						width: 200rpx;
						height: 136rpx;
						border-radius: 16rpx;
						background-size: 100% 100% !important;
						position: relative;
						// margin-right: 20rpx;

						.itemTop {
							position: absolute;
							top: 16rpx;
							left: 0;
							width: 100%;
							height: 40rpx;
							padding: 0 16rpx;
							box-sizing: border-box;

							.itemName {
								color: #ffffff;
								font-size: 28rpx;
								font-weight: 500;
								font-family: "Alibaba PuHuiTi 2.0";
							}

						}

						.wantImg {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
					}
				}
			}

		}
	}
</style>